import React from 'react'
import { SafeAreaView, StyleProp, View, ViewStyle, StatusBar } from 'react-native'
import { useSafeAreaInsets } from 'react-native-safe-area-context'

type Props = {
  /** 子元素 */
  children: React.ReactNode
  style?: StyleProp<ViewStyle>
  /** 底部背景颜色 */
  footerBgColor?: string
  /** 设置文字颜色 */
  barStyle?: 'default' | 'light-content' | 'dark-content'
  hiddenStatusBar?: boolean
}

export default (props: Props) => {
  const {
    children,
    style,
    footerBgColor = 'transparent',
    barStyle = 'dark-content',
    hiddenStatusBar = false,
  } = props
  const {bottom} = useSafeAreaInsets()
  return (
    <View style={{flex: 1, backgroundColor: $.color.pageBackground}}>
      <StatusBar barStyle={barStyle} translucent hidden={hiddenStatusBar} />
      <View style={[{ flex: 1 }, style]}>{children}</View>
      <View style={[{ backgroundColor: footerBgColor, height: bottom }]} />
    </View>
  )
};
